// 列表手风琴样式
<template>
  <div>
    <div class="box_main_accordion">
      <accordion v-for="(task,i) in lists" :key="i">
        <accordionTitle class="TimelineTitle-first">
          <div class="TimelineTitle-first-lf">
            <i class="el-icon-star-on"></i>
            {{task.name}}
          </div>
          <div>
            <el-button type="primary" size="mini" icon="el-icon-edit">新增组</el-button>
            <i :class="{'el-icon-arrow-down':!task.isShow,'el-icon-arrow-up':task.isShow}" @click="task.isShow = !task.isShow"></i>
          </div>
        </accordionTitle>
        <div class="TimelineItem-first">
          <el-collapse-transition>
            <ul class="TimelineItem-UL" v-show="!task.isShow">
              <li class="transition-box TimelineItem_firtsItem" v-for="(groups,groupsi) in task.groups" :key="groupsi">
                <div class="TimelineItem-first-lf">
                  <i class="el-icon-location" style="marginRight:5px;"></i>{{groups.dept.label}}
                </div>
                <div class="TimelineItem-first-lc">
                  <span class="TimelineItem-first-lcItme" v-for="(roles,rolesi) in groups.roles" :key="rolesi">
                    {{roles.zh}}
                  </span>
                </div>
                <div class="TimelineItem-first-lr">
                  <el-button size="mini" type="primary" icon="el-icon-edit" plain></el-button>
                  <el-button size="mini" type="danger" icon="el-icon-delete" plain></el-button>
                </div>
              </li>
            </ul>
          </el-collapse-transition>
        </div>
      </accordion>
    </div>
  </div>
</template>
<script>
import accordion from "./cModule/accordion.vue";
import accordionTitle from "./cModule/accordionTitle.vue";
export default {
  components: {
    accordion,
    accordionTitle
  },
  data() {
    return {
      lists: [
        {
          taskDefId: "START",
          name: "A",
          isShow: false,
          groups: [
            {
              dept: {
                id: "",
                children: null,
                label: "3"
              },
              isShow: false,
              deptIds: [""],
              roles: [
                {
                  id: "",
                  creator: "admin",
                  createTime: 1535186709187,
                  modifier: "admin",
                  updateTime: 1535212436559,
                  deleteFlag: 0,
                  name: "DBSHY",
                  zh: "3(v1)",
                  remark: "3",
                  resourcesIds: null,
                  tree: null,
                  isShow: false
                }
              ]
            },
            {
              dept: {
                id: "",
                children: null,
                label: "宝塔区"
              },
              isShow: false,
              deptIds: [""],
              roles: [
                {
                  id: "",
                  creator: "admin",
                  createTime: 1535186709187,
                  modifier: "admin",
                  updateTime: 1535212436559,
                  deleteFlag: 0,
                  name: "DBSHY",
                  zh: "宝塔区(v1)",
                  remark: "这个角色是给低保受理办事员用的",
                  resourcesIds: null,
                  tree: null,
                  isShow: false
                }
              ]
            }
          ]
        }
      ]
    };
  },
  watch: {},
  computed: {},
  methods: {},
  filter: {}
};
</script>
<style scoped>
.TimelineItem-UL {
  padding-top: 10px;
  padding-bottom: 10px;
}
.TimelineTitle-first-lf {
  width: 50%;
  height: 22px;
  line-height: 22px;
  overflow: hidden;
  font-size: 16px;
  color: #409eff;
}
.TimelineItem-first-lcItme {
  border: 1px solid #aaa;
  border-radius: 3px;
  overflow: hidden;
  padding: 5px;
  margin-right: 7px;
  margin-bottom: 3px;
  margin-top: 5px;
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.TimelineItem-first-lc {
  min-height: 40px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  width: 58%;
  margin-left: 2%;
}

.TimelineItem-first-lf {
  font-size: 15px;
  color: #409eff;
  text-align: left;
  width: 20%;
  padding-top: 7px;
  padding-bottom: 7px;
}

.TimelineItem-first-lr {
  display: flex;
  align-items: center;
}
.TimelineItem_firtsItem {
  padding-top: 5px;
  padding-bottom: 4px;
  min-height: 50px;
  width: calc(100% - 250px);
  margin-left: 55px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

.TimelineItem_firtsItem:last-child {
  border-bottom: none;
}

.TimelineTitle-senoud {
  display: flex;
  justify-content: space-between;
  height: 45px;
  border-bottom: 1px solid #aaa;
}

.box_main_accordion .el-icon-arrow-down,
.box_main_accordion .el-icon-arrow-up {
  cursor: pointer;
  font-size: 20px;
  margin-left: 15px;
}

.TimelineTitle-first {
  display: flex;
  justify-content: space-between;
  color: #409eff;
  height: 45px;
  border-bottom: 2px solid #ccc;
}

.box_main_accordion .el-icon-star-on {
  color: #409eff;
  font-size: 15px;
}

.box_main_accordion {
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  padding-top: 5px;
  margin-left: 15px;
}
</style>